<template>
    <div :id="this.id" class="no-drag" style="height: 100%;width:100%;background: #f7d7e8">
        <div class="edit">
            <i @click="openText" title="编辑" class="fa fa-edit" aria-hidden="true" ></i>
        </div>
        <div class="close">
            <i @click="deleteText" title="关闭" class="fa fa-trash" aria-hidden="true"></i>
        </div>
        <div class="vue-draggable-handle">
            <i class="fa fa-arrows-alt" aria-hidden="true"></i>
        </div>
        <!--<div style="height: 100%;width: 100%" contenteditable></div>-->
        <!--<div id="'yibiao'+this.id"></div>-->
        <div class="textDiv no-drag"></div>
        <div class="textEditor" style="display: none"></div>
    </div>
</template>

<script>
    import E from 'wangeditor'

    export default {
        name: "editor",
        data(){
            return{
                editorContent: ''
            }
        },
        props:{
            id:String,
        },
        methods:{
            deleteText(){
                let nowElement = document.getElementById(this.id).parentElement.id;
                this.$emit('deleteSelectElement',nowElement);
            },
            openText(){
                let edid = '#'+this.id +' .textEditor';
                let conid = '#'+this.id +' .textDiv';
                let show = $(edid).css('display');
                if(show=="none")
                    $('#'+this.id +' .textEditor').css('display','block');
                else {
                    $(conid).empty();
                    $(conid).append(this.editorContent);
                    $(edid).css('display','none');
                }
            },

        },
        mounted(){
            let con = '#'+this.id +' .textEditor';
            let editor = new E(con);
            editor.customConfig.menus = [
                'justify',
                'bold',
                'fontSize',
                'italic',
                'underline',
            ];

            editor.customConfig.onchange = (html) => {
                this.editorContent = html
            };
            editor.create();
        }
    }
</script>

<style>
    .textDiv{
        width:100%;
        height:100%;
    }
    .textEditor{
        top:10%;
        left:0px;
        position: absolute;
        width:100%;
        height:100%;
    }
    /*.textEditor div,.textDiv div div{*/
        /*height:30px;*/
    /*}*/
    .w-e-text-container{
        background-color: snow;
    }
    .edit{
        /*background: #5daf34;*/
        position: absolute;
        right: 5%;
        top: 3%;
        font-size: 14px;
        padding-right: 3px;
        box-sizing: border-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor:pointer;
    }
    .close{
        /*background: #5daf34;*/
        position: absolute;
        right: 0.5%;
        top: 3%;
        font-size: 14px;
        padding-right: 3px;
        box-sizing: border-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor:pointer;
    }
    .vue-draggable-handle{
        /*background: #5daf34;*/
        position: absolute;
        left: 1%;
        top: 2%;
        font-size: 14px;
        padding-right: 3px;
        box-sizing: border-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor:pointer;
    }
    .vue-draggable-handle:hover{
        color: #4060ff
    }
    .edit:hover{
        color: #4060ff
    }
    .close:hover{
        color: #4060ff
    }
</style>